<template>
  <!--  map_container 必须是固定的-->
  <div id="allmap"></div>
</template>
<script>
//import "_c/import-es5js/importJs.js"
import {BMapGLLoader, BMapLoader, BMapGLJs, BMapLoadMapv} from "_c/import-es5js/BMapLoader"
export default {
  props: {
    devices: {
      type: Array,
      default: () => []
    },
    mapInfo: {
      type: Object,
      default:()=>{
        return{
          centerLongitude:114.236262,
          centerLatitude:22.677236,
          minZoom:2,
          maxZoom:20,
          defaultZomm:5,
          mode: 'ONLINE'
        }
      }

    },
  },
  watch:{
    devices(oldVal,newVal){
      console.log("oldVal:%o,newVal:%o",oldVal,newVal)
      this.aggDeviceData();
    }
  },
  data() {
    return {
      map:null,
      data:[],
      citys:[],

      randomCount:1000,
      view:null,
      clusterLayer:null,
      mapv:null

    }
  },
  created() {
    this.createMap()
  },
  destroyed() {
    if (!!this.map){
      this.map.destroy();
    }

  },
  methods: {
    createMap() {
      this.$nextTick(() => {
        BMapLoader('IfkNE0XDdoaTwdGGkOWrALDkFZOTI9b8').then(BMap => {
          const map = new BMap.Map('allmap', { enableMapClick: false });
          map.disableKeyboard() // 禁用键盘操作地图
          map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
          //const point = new BMap.Point(106.78887812364171, 29.666046706760273)

          const point = new BMap.Point(this.mapInfo.centerLongitude,this.mapInfo.centerLatitude);
          map.centerAndZoom(point, this.mapInfo.defaultZomm);
          //map.setMapStyle({style:'midnight'});
          this.map=map;
        });
        BMapLoadMapv("123").then(mapv => {
          console.log("after BMapLoadMapv");
        })
      })

    },
    aggDeviceData(){
      // 参考 http://mapv.baidu.com/examples/#baidu-map-point-cluster.html
      console.log("devices: %o",this.devices);
      this.data=[];

      for(let i in this.devices){
        this.data.push({
          geometry: {
            type: 'Point',
            coordinates: [this.devices[i].lng - 0.01 + Math.random(), this.devices[i].lat - 0.01 + Math.random()]
          },
          iconOptions: {
            url: [
              'images/flag.png',
              'images/marker.png',
              'images/star.png'][this.devices.length % 3],
            width: 50/3,
            height: this.devices.length % 3 === 2 ? 50/3 : 77/3
          }
        });
        console.log(this.data);
        let dataSet = new mapv.DataSet(this.data);

        let options = {
          // shadowColor: 'rgba(255, 250, 50, 1)',
          // shadowBlur: 10,
          // 非聚合点的颜色和大小，未设置icon或icon获取失败时使用
          fillStyle: 'rgba(255, 50, 0, 1.0)',
          size: 100 / 3 / 2, // 非聚合点的半径
          // 非聚合时点的icon设置，会被具体点的设置覆盖，可设置为空
          // iconOptions: {
          //     url: 'images/marker.png',
          //     width: 50 / 3,
          //     height: 77 / 3,
          //     offset: {
          //         x: 0,
          //         y: 0
          //     }
          // },
          minSize: 8, // 聚合点最小半径
          maxSize: 31, // 聚合点最大半径
          globalAlpha: 0.8, // 透明度
          clusterRadius: 150, // 聚合像素半径
          maxClusterZoom: 18, // 最大聚合的级别
          maxZoom: 15, // 最大显示级别
          minZoom: 3, // 最小显示级别
          showText: true, //
          minPoints: 3, // 最少聚合点数，点数多于此值才会被聚合
          extent: 400, // 聚合的细腻程度，越高聚合后点越密集
          label: { // 聚合文本样式
            show: true, // 是否显示
            fillStyle: 'white',
            // shadowColor: 'yellow',
            // font: '20px Arial',
            // shadowBlur: 10,
          },
          //gradient: { 0: "blue", 0.5: 'yellow', 1.0: "rgb(255,0,0)"}, // 聚合图标渐变色
          gradient: { 0: "blue", 0.5: 'green', 1.0: "red"},
          draw: 'cluster',
          methods: {
            click(point) {
              if (point) {
                if (point.iconOptions) {
                  console.log(point.iconOptions.url);
                }
                // 通过children可以拿到被聚合的所有点
                console.log(point.children);
              }
            }
          }
        }
        let mapvLayer = new mapv.baiduMapLayer(this.map, dataSet, options);

      }
    },
  },
  mounted(){
  }
}
</script>
<style lang="less">
//@import "../../../my-theme/template";
#allmap {
  width: 100%;
  height: 100%;
  margin: 0;
}
</style>
